restoring requests

6 files changed, 107 insertions, 35 deletions

diff --git a/src/routes/(app)/[username]/(profile)/+layout.svelte b/src/routes/(app)/[username]/(profile)/+layout.svelte
index 6dacf2ce..f3488e4b 100644
--- a/src/routes/(app)/[username]/(profile)/+layout.svelte
+++ b/src/routes/(app)/[username]/(profile)/+layout.svelte
@@ -120,51 +120,29 @@
 						</button>
 					</a>
 				</div>
-			{/if}
-			{#if !subject.anon && subject.username !== user?.username}
+
 				<div class="w-full flex">
-					<a href={user ? `/send/${subject.username}` : `/${subject.username}/receive`} class="mx-auto">
+					<a href={`/${subject.username}/request`} class="mx-auto">
 						<button class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-60">
 							<div class="mx-auto flex">
-								<Icon icon="send" style="mr-2" />
-								<div class="mt-1">{$t('user.pay')}</div>
+								<Icon icon="numpad" style="mr-2 my-auto" />
+								<div class="mt-1 my-auto">{$t('payments.requestAnInvoice')}</div>
 							</div>
 						</button>
 					</a>
 				</div>
 			{/if}
-
-			{#if user?.id === subject.id}
+			{#if !subject.anon && subject.username !== user?.username}
 				<div class="w-full flex">
-					<a href={`/send`} class="mx-auto">
+					<a href={user ? `/send/${subject.username}` : `/${subject.username}/receive`} class="mx-auto">
 						<button class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-60">
 							<div class="mx-auto flex">
 								<Icon icon="send" style="mr-2" />
-								<div class="mt-1">{$t('user.dashboard.send')}</div>
-							</div>
-						</button>
-					</a>
-				</div>
-				<div class="w-full flex">
-					<a href={`/${subject.username}/receive`} class="mx-auto">
-						<button class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-60">
-							<div class="mx-auto flex">
-								<Icon icon="numpad" style="mr-2" />
-								<div class="mt-1">{$t('user.dashboard.receive')}</div>
+								<div class="mt-1">{$t('user.pay')}</div>
 							</div>
 						</button>
 					</a>
 				</div>
-				<!-- <div class="w-full flex"> -->
-				<!-- 	<a href={`/${subject.username}/receive`} class="mx-auto"> -->
-				<!-- 		<button class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-60"> -->
-				<!-- 			<div class="mx-auto flex"> -->
-				<!-- 				<Icon icon="support" style="mr-2" /> -->
-				<!-- 				<div class="mt-1">{$t('user.messages')}</div> -->
-				<!-- 			</div> -->
-				<!-- 		</button> -->
-				<!-- 	</a> -->
-				<!-- </div> -->
 			{/if}
 		</div>
 	</div>
diff --git a/src/routes/(app)/[username]/(profile)/+page.server.js b/src/routes/(app)/[username]/(profile)/+page.server.js
index c29ed7df..553e2559 100644
--- a/src/routes/(app)/[username]/(profile)/+page.server.js
+++ b/src/routes/(app)/[username]/(profile)/+page.server.js
@@ -1,6 +1,6 @@
-import { get } from '$lib/utils';
+import { auth, get } from '$lib/utils';
 
-export async function load({ params, parent, url }) {
+export async function load({ cookies, params, parent, url }) {
 	let { subject } = await parent();
 	let { pubkey } = subject;
 
@@ -16,5 +16,7 @@ export async function load({ params, parent, url }) {
 		e.seen = e.created_at;
 	});
 
-	return { events };
+  let { requests } = await get('/requests', auth(cookies));
+
+	return { events, requests };
 }
diff --git a/src/routes/(app)/[username]/(profile)/+page.svelte b/src/routes/(app)/[username]/(profile)/+page.svelte
index 1cf525a0..ae8add63 100644
--- a/src/routes/(app)/[username]/(profile)/+page.svelte
+++ b/src/routes/(app)/[username]/(profile)/+page.svelte
@@ -1,10 +1,9 @@
 <script>
-	import { Balance, Feed } from '$comp';
+	import { Avatar, Balance, Feed } from '$comp';
 	import { t } from '$lib/translations';
 
 	export let data;
-	let { events, subject, user } = data;
-	let v;
+	let { events, requests, subject, user } = data;
 </script>
 
 <div class="flex justify-center lg:justify-start">
@@ -12,3 +11,28 @@
 		<Balance {user} />
 	{/if}
 </div>
+
+<div>
+	{#each requests as { id, invoice, memo, requester: r }}
+		<a href={`/${user.username}/receive/${id}`}>
+			<div class="border-b p-2 last:border-b-0 hover:bg-gray-100">
+				<div class="flex">
+					<div>
+						<div class="flex">
+							<Avatar user={r} size={20} />
+							<div class="my-auto text-left">
+								<p class="ml-1 text-lg break-words">{r.username}</p>
+								<p class="ml-1 text-secondary">{memo}</p>
+							</div>
+						</div>
+					</div>
+					<div class="whitespace-nowrap my-auto ml-auto flex gap-2">
+						<button class="rounded-full border py-2 px-4 font-bold hover:opacity-80 w-full"
+							>Invoice</button
+						>
+					</div>
+				</div>
+			</div>
+		</a>
+	{/each}
+</div>
diff --git a/src/routes/(app)/[username]/(profile)/request/+page.server.js b/src/routes/(app)/[username]/(profile)/request/+page.server.js
new file mode 100644
index 00000000..2c1d6bde
--- /dev/null
+++ b/src/routes/(app)/[username]/(profile)/request/+page.server.js
@@ -0,0 +1,15 @@
+import { redirect } from '@sveltejs/kit';
+import { auth, post } from '$lib/utils';
+
+export const actions = {
+	create: async ({ cookies, params, request, url }) => {
+		let form = Object.fromEntries(await request.formData());
+		let { id, requester } = await post('/requests', form, auth(cookies));
+		throw redirect(307, `/${params.username}/request/${id}`);
+	},
+
+	delete: async ({ cookies, request }) => {
+		let form = Object.fromEntries(await request.formData());
+		let r = await post('/requests/delete', form, auth(cookies));
+	}
+};
diff --git a/src/routes/(app)/[username]/(profile)/request/+page.svelte b/src/routes/(app)/[username]/(profile)/request/+page.svelte
new file mode 100644
index 00000000..75117ff4
--- /dev/null
+++ b/src/routes/(app)/[username]/(profile)/request/+page.svelte
@@ -0,0 +1,35 @@
+<script>
+	import { t } from '$lib/translations';
+	import { enhance } from '$app/forms';
+	import { Icon } from '$comp';
+
+	export let data;
+
+	let { subject, user } = data;
+</script>
+
+<div class="container max-w-lg px-4 mx-auto mt-10 space-y-5">
+	<h1 class="px-3 md:px-0 text-center text-3xl md:text-4xl font-semibold">
+		{$t('payments.requestAnInvoice')}
+	</h1>
+
+	<form action="?/create" method="POST" use:enhance class="space-y-5">
+		<input type="hidden" name="requester_id" value={user.id} />
+		<input type="hidden" name="recipient" value={subject.username} />
+
+		<textarea
+			name="memo"
+			placeholder={$t('payments.describeOrder')}
+			class="w-full p-4 border rounded-xl h-48"
+		/>
+
+		<div class="w-full flex">
+			<button
+				type="submit"
+				class="bg-black text-white border rounded-full px-6 py-2 font-bold mx-auto"
+			>
+				{$t('payments.submit')}
+			</button>
+		</div>
+	</form>
+</div>
diff --git a/src/routes/(app)/[username]/(profile)/request/sent/+page.svelte b/src/routes/(app)/[username]/(profile)/request/sent/+page.svelte
new file mode 100644
index 00000000..4995bfb2
--- /dev/null
+++ b/src/routes/(app)/[username]/(profile)/request/sent/+page.svelte
@@ -0,0 +1,18 @@
+<script>
+	import { scale } from 'svelte/transition';
+	import { Icon } from '$comp';
+
+	export let data;
+	let { subject } = data;
+</script>
+
+<div class="container px-4 text-center mx-auto">
+	<div class="flex w-full py-20 max-w-[200px] mx-auto" in:scale={{ start: 0.5 }}>
+		<Icon icon="check" style="mx-auto" />
+	</div>
+	<h1 class="text-3xl md:text-4xl font-bold mb-6">Request sent</h1>
+</div>
+
+<a href={`/${subject.username}`}>
+	<div class="opacity-0 w-screen h-screen fixed top-24 left-0 z-50" />
+</a>